<template>
  <div class="library">
    <v-filter
      @chooseType="chooseType"
      :diff="filter"
      :filterList="filterList"
    ></v-filter>
    <main v-if="bookList && bookList.total > 0">
      <ul class="info-list">
        <list-template
          v-for="item of bookList.rows"
          :key="item.bookId"
          :item="item"
          :diff="'library-list'"
        />
      </ul>
      <ul class="pagination-box" v-show="bookList.pages > 1">
        <li class="pre-page">
          <mt-button @click.native="prePage">
            <svg-icon
              class="preIcon"
              icon-class="preIcon"
              slot="icon"
            ></svg-icon>
            Previous page
          </mt-button>
        </li>
        <li class="cur-total">
          <span class="current" v-text="bookList.current"></span>
          /
          <span class="total" v-text="bookList.pages"></span>
        </li>
        <li class="next-page">
          <mt-button @click.native="nextPage">
            Next page
            <svg-icon
              class="nextIcon"
              icon-class="nextIcon"
              slot="icon"
            ></svg-icon>
          </mt-button>
        </li>
      </ul>
    </main>
    <div class="empty" v-else-if="bookList.total == 0">
      <span>No resources available</span>
    </div>
  </div>
</template>

<script>
import vFilter from "@/components/common/filter/Index";
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  data() {
    return {
      filter: ["sex"],
      filterList: {}, //分类列表
      bookList: {}, //搜索結果列表
      params: {
        pageNum: 1,
        pageSize: 20,
      },
      scrollTop: 0,
    };
  },
  components: {
    vFilter,
    listTemplate,
  },
  computed: {
    //   key() {
    //       return this.$route.name ? this.$route.name+ +new Date() : this.$route+ +new Date()
    //   }
  },
  watch: {},
  created() {},
  mounted() {
    this.genres();
    this.searchBook();
  },
  methods: {
    // 上一页
    prePage() {
      if (this.bookList.current > 1) {
        this.params.pageNum -= 1;
        this.searchBook();
        this.backTop();
      } else {
        return;
      }
    },
    // 下一页
    nextPage() {
      if (this.bookList.current < this.bookList.pages) {
        this.params.pageNum += 1;
        this.searchBook();
        this.backTop();
      } else {
        return;
      }
    },
    //筛选标签
    chooseType() {
      this.params.pageNum = 1;
      this.searchBook();
    },
    async genres() {
      try {
        let res = await this.$api.home.genres({});
        if (res.code === 1) {
          let list = res.source;
          for (let key in list) {
            let item = {
              categoryId: "all",
              name: "All",
              site: key == "female" ? 2 : key == "male" ? 1 : null,
            };
            list[key].unshift(item);
          }
          this.filterList = list;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 查询的书籍列表
    async searchBook() {
      try {
        let params = this.$route.params;
        let param = {
          site: params.sex === "female" ? 2 : 1,
          categoryId: params.genre === "all" ? "" : params.genre,
          writingProcess: params.state === "all" ? "" : params.state,
        };
        let res = await this.$api.home.searchBook({
          ...this.params,
          ...param,
        });
        if (res.code === 1) {
          this.bookList = res.source;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 返回顶部
    backTop() {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 160);
    },
  },
};
</script>

<style lang="scss" scoped>
.library {
  > main {
    background: #f5f5f5;
    padding: 30px 40px;
    .info-list {
    }
    .pagination-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pre-page,
      .next-page {
        width: 208px;
        height: 58px;
        .mint-button {
          width: 100%;
          height: 100%;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #e86472;
          border-radius: 4px;
          font-weight: 600;
          color: #fff;
          font-size: 22px;
          .mint-button-icon {
            .svg-icon {
              width: 11px;
              height: 24px;
            }
          }
        }
        &.next-page {
          .mint-button {
            flex-direction: row-reverse;
          }
        }
      }
      .cur-total {
        color: #999999;
        font-size: 20px;
      }
    }
  }
  .empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
